<template>
  <div class="bank-card">
    <van-cell-group>
      <van-cell>
        <template #title>
          <div class="card-header">
            <span class="bank-name">建融慧学</span>
            <span class="card-type">校园卡</span>
          </div>
          <div class="card-number">W202403019</div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-grid :column-num="3" :border="false">
      <van-grid-item icon="idcard" text="身份码" />
      <van-grid-item icon="balance-o" text="数字人民币" />
      <van-grid-item icon="qr" text="付款码" />
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'BankCard'
}
</script>

<style scoped>
.bank-card {
  background: #fff;
  margin: 15px;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.bank-name {
  font-size: 18px;
  font-weight: bold;
}

.card-type {
  font-size: 12px;
  color: #666;
  margin-left: 10px;
}

.card-number {
  font-size: 16px;
  color: #666;
}
</style> 